<template>
    <div class='edit'>
        <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
                <el-form class='formData' :label-position="labelPosition" label-width="100px">
                    <div class='firstFillIn'>
                        <el-form-item label="上映状态">
                            <el-select v-model="formLabelAlign.releaseStatus" placeholder="请选择上映状态">
                                <el-option
                                v-for="item in release"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="融资进度">
                            <el-select :disabled="disabled" v-model="formLabelAlign.status" placeholder="请选择融资状态">
                                <el-option
                                v-for="item in status"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <p class='editExplain'>请在项目列表更改融资进度</p>
                        </el-form-item>
                    </div>
                    <el-form-item label="发行商">
                        <el-select :disabled="disabled" v-model="formLabelAlign.targetUserId" placeholder="请选择发行商">
                            <el-option
                            v-for="item in issueList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目名称">
                        <el-input :disabled="disabled" v-model="formLabelAlign.title" maxlength="24" placeholder='请输入项目名称'></el-input>
                    </el-form-item>
                    <el-form-item label="影视类型">
                        <el-select :disabled="disabled" v-model="formLabelAlign.type" placeholder="请选择影视类型">
                            <el-option
                            v-for="item in movieType"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="融资金额">
                        <div class='moneyItem'>
                            <el-input
                                @change='changeNumber()'
                                v-model="formLabelAlign.totalOfMoney" 
                                placeholder="请输入融资金额，需最低10W且需为1W的倍数"></el-input>
                            <span>元</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="单份价格">
                        <div class='moneyItem'>
                            <el-input
                                @change='changeNumber()'
                                v-model="formLabelAlign.priceOfUnit" 
                                placeholder="请输入单份价格，需100的倍数"></el-input>
                            <span>元/份</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="项目份数">
                        <div class='moneyItem'>
                            <el-input 
                                :disabled="true"
                                v-model="numberItems" 
                                placeholder="请输入项目份数"></el-input> 
                            <span>份</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="限购数量">
                        <el-input v-model="formLabelAlign.userLimit" placeholder="请输入限购数量"></el-input>
                    </el-form-item>
                    <el-form-item label="线下订金">
                        <el-input v-model="formLabelAlign.deposit" placeholder="请输入线下订金"></el-input>
                    </el-form-item>
                    <el-form-item label="简介">
                        <el-input 
                            :autosize="{ minRows: 2, maxRows: 4}"
                            v-model="formLabelAlign.subtitle"  
                            placeholder="请输入简介，20字以内"
                            maxlength="20"
                            type='textarea'>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="收益说明">
                        <el-input 
                            :autosize="{ minRows: 2, maxRows: 4}"
                            type='textarea'
                            maxlength="20"
                            placeholder="请输入收益说明，20字以内"
                            v-model="formLabelAlign.incomeDetail">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="风险提示">
                        <el-input 
                            :autosize="{ minRows: 2, maxRows: 4}"
                            type='textarea'
                            maxlength="500"
                            placeholder="请输入风险提示，500字以内"
                            v-model="formLabelAlign.riskWarning"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="是否下线">
                        <el-radio-group v-model="formLabelAlign.disable">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序值">
                        <el-input v-model="formLabelAlign.queue" placeholder="请输入排序值"></el-input>
                    </el-form-item>
                    <el-form-item class='cover' label="项目封面">
                        <el-upload
                            class="upload-demo"
                            :action='uploadAction'
                            :show-file-list="false"
                            name='userfile'
                            :on-success="handleAvatarSuccess">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">上传项目封面，340x458宽高大小</div>
                        </el-upload>
                        <div v-if="coverImageSatus" class='imgBox'>
                            <img :src="formLabelAlign.coverImage" alt="">
                        </div>
                    </el-form-item>
                    <el-form-item class='rotation' label="轮播图">
                        <el-upload
                            class="upload-demo"
                            :action='uploadAction'
                            name='userfile'
                            :show-file-list="false"
                            :on-success="handleRotationSuccess">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">上传项目轮播图，360x670宽高大小，5张以内</div>
                        </el-upload>
                        <div v-if='carouselStatus' class='rotationList'>
                            <div v-for='(item,index) in formLabelAlign.carousels' :key='index' class='imgList'>
                                <div>
                                    <img :src="item" alt="">
                                </div>
                                <p @click='delRotation(item,index)'>删除</p>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>

            </el-tab-pane>
            <el-tab-pane label="项目详情">
                <Tinymce :height='400' ref="editor" v-model="formLabelAlign.content"/>
            </el-tab-pane> 
            <el-tab-pane label="样本合同">
                <threeTinymce ref="threeTinymce" @sampleContractData='sampleContractData'></threeTinymce>
            </el-tab-pane>    
        </el-tabs>

        <el-button class='submit' @click='submit' type="primary">提交</el-button>    
    </div>
</template>



<script>
import { ajax } from "@/api";
import { parseTime } from '@/utils';
import numberFormat from '@/api/numberFormat';
import { getToken } from "@/utils/auth";
import Tinymce from '@/components/Tinymce'
import threeTinymce from './threeTinymce';
export default {
    name:'edit',
    data(){
        return {
            disabledPreHeating:false,
            coverImageSatus:false,
            carouselStatus:false,
            numberItems:'',
            uploadAction: process.env.BASE_API + "file.upload",
            disabled:true,
            issueList:'',    //发行商列表
            movieType:vars.movieType,//影视类型
            status:vars.movieStatus,//融资状态
            release:vars.movieReleaseStatus, //上映状态
            releaseStatus:[{   //发布状态
                value:'是',
                text:'是'
            },{
                value:'否',
                text:'否'
            }],
            labelPosition:'left',
            formLabelAlign:{
                movieId:'',
                targetUserId:'',
                type:'',
                status:'',
                releaseStatus:'',
                title:'',
                subtitle:'',
                totalOfMoney:'',
                priceOfUnit:'',
                userLimit:'',
                coverImage:'',
                carousels:[],
                content:'',
                contractDetail:'',
                incomeDetail:'',
                riskWarning:'',
                disable:false,
                queue:'',
                token:getToken()
            },
            params: {
                targetId: "",
                token: getToken()
            },
            salesMoney:0,
            users:'',
            listParams:{
                role:'issue',
                auth:0,
                keyword:'',
                start:0,
                limit:100,
                token:getToken()
            },
            finacingProgress:'',
            releaseStatus:''
        }
    },
    methods:{
        //发行商列表
        getList(){
            ajax('users',this.listParams).then((res) => {
                if(res.status === 200){
                    this.issueList = res.data.data;
                }else{
                    this.$message.error(json.message);
                }
            });
        },
        //获得项目详细信息
        getData() {
            this.params.targetId = this.$route.params.movieId;
            ajax("movieDetailForManager", this.params).then(res => {
                console.log(res);
                if (res.data.status) {
                    let list = res.data.data;
                    this.salesMoney = res.data.salesOfMoney;
                    this.formLabelAlign.movieId = list.id;
                    this.formLabelAlign.targetUserId = list.userId;
                    this.formLabelAlign.type = list.type.value;
                    this.formLabelAlign.status = list.status.value;
                    this.finacingProgress = list.status.value;
                    
                    this.formLabelAlign.releaseStatus = list.releaseStatus.value;
                    this.formLabelAlign.title = list.info.title;
                    this.formLabelAlign.subtitle = list.info.subtitle;
                    this.formLabelAlign.priceOfUnit = numberFormat.showDecimal(list.info.priceOfUnit);
                    this.formLabelAlign.userLimit = list.info.userLimit;
                    if(list.info.deposit === 0){
                        this.formLabelAlign.deposit = '';
                    }else{
                        this.formLabelAlign.deposit = numberFormat.showDecimal(list.info.deposit);
                    }

                    this.formLabelAlign.coverImage = list.info.coverImage;
                    this.formLabelAlign.carousels = list.info.carousels;
                    this.formLabelAlign.content = list.info.content;
                    this.formLabelAlign.incomeDetail = list.info.incomeDetail;
                    if(list.info.riskWarning){
                        this.formLabelAlign.riskWarning = list.info.riskWarning;
                    }else{
                        this.formLabelAlign.riskWarning = '';
                    }   
                    this.formLabelAlign.content = list.info.content;

                    
                    this.releaseStatus = list.releaseStatus.value;
                    this.formLabelAlign.totalOfMoney = numberFormat.showDecimal(list.totalOfMoney);
                    console.log(list.totalOfMoney / list.info.priceOfUnit);
                    this.numberItems = numberFormat.showDecimal(list.totalOfMoney) / numberFormat.showDecimal(list.info.priceOfUnit);
                    this.coverImageSatus = true;
                    this.carouselStatus = true;
                    if(list.disable === 0){
                        this.formLabelAlign.disable = false;
                    }else{
                        this.formLabelAlign.disable = true;
                    }
                    this.formLabelAlign.queue = list.queue;
                    this.users = res.data.user;

                    this.$refs.threeTinymce.openThreeStatus(list.info.contractDetail);
                    this.formLabelAlign.contractDetail = list.info.contractDetail;
                }
            });
        },
        changeNumber(){
            console.log(this.formLabelAlign.totalOfMoney,this.formLabelAlign.priceOfUnit);
            //自动计算出项目份数
            if(Number(this.formLabelAlign.totalOfMoney) !== '' && Number(this.formLabelAlign.priceOfUnit) !== ''){
                if(Number(this.formLabelAlign.totalOfMoney) && Number(this.formLabelAlign.priceOfUnit)){
                  if(isNaN(parseInt(Number(this.formLabelAlign.totalOfMoney) / Number(this.formLabelAlign.priceOfUnit)))){
                      this.numberItems = 0;
                  }else{
                      this.numberItems = parseInt(Number(this.formLabelAlign.totalOfMoney) / Number(this.formLabelAlign.priceOfUnit));
                  }  
                }
            }
        },
        //验证是否为数字和正整数
        isNumber(number){
            let re = /^[0-9]+.?[0-9]*$/;
            let integer = /^[1-9]+[0-9]*]*$/;
            let num = number;
        　　if (!re.test(num)) {
        　　　　return this.$message.error("请输入数字");
        　　}

            if (!integer.test(num)) {
        　　　　return this.$message.error("请输入正整数");
        　　}else{
               return true;
            }
        },
        vails(){
            if(this.formLabelAlign.releaseStatus === ''){
                return this.$message.error('请选择影片上映状态');
            }

            if(this.releaseStatus === 'shooting'){
                if(this.formLabelAlign.releaseStatus === 'planing'){
                    return this.$message.error('拍摄制作中不能更改为筹划中');
                }
            }

            if(this.releaseStatus === 'making'){
                if(this.formLabelAlign.releaseStatus === 'shooting'){
                    return this.$message.error('后期制作中不能更改为拍摄制作中');
                }
                if(this.formLabelAlign.releaseStatus === 'planing'){
                    return this.$message.error('后期制作中不能更改为筹划中');
                }
            }

            if(this.releaseStatus === 'waitingForRelease'){
                if(this.formLabelAlign.releaseStatus === 'shooting'){
                    return this.$message.error('待上映不能更改为拍摄制作中');
                }
                if(this.formLabelAlign.releaseStatus === 'making'){
                    return this.$message.error('待上映不能更改为后期制作中');
                }
                if(this.formLabelAlign.releaseStatus === 'planing'){
                    return this.$message.error('待上映不能更改为筹划中');
                }
            }

            if(this.releaseStatus === 'toBeRelease'){
                if(this.formLabelAlign.releaseStatus === 'waitingForRelease'){
                    return this.$message.error('即将上映不能更改为待上映');
                }
                if(this.formLabelAlign.releaseStatus === 'shooting'){
                    return this.$message.error('即将上映不能更改为拍摄制作中');
                }
                if(this.formLabelAlign.releaseStatus === 'making'){
                    return this.$message.error('即将上映不能更改为后期制作中');
                }
                if(this.formLabelAlign.releaseStatus === 'planing'){
                    return this.$message.error('即将上映不能更改为筹划中');
                }
            }

            if(this.releaseStatus === 'released'){
                if(this.formLabelAlign.releaseStatus === 'toBeRelease'){
                    return this.$message.error('已上映不能更改为待上映');
                }
                if(this.formLabelAlign.releaseStatus === 'waitingForRelease'){
                    return this.$message.error('已上映不能更改为待上映');
                }
                if(this.formLabelAlign.releaseStatus === 'shooting'){
                    return this.$message.error('已上映不能更改为拍摄制作中');
                }
                if(this.formLabelAlign.releaseStatus === 'making'){
                    return this.$message.error('已上映不能更改为后期制作中');
                }
                if(this.formLabelAlign.releaseStatus === 'planing'){
                    return this.$message.error('已上映不能更改为筹划中');
                }
            }

            if(this.formLabelAlign.status === ''){
                return this.$message.error('请选择融资进度');
            }
            if(this.formLabelAlign.targetUserId === ''){
                return this.$message.error('请选择发行商');
            }
            if(this.formLabelAlign.title === ''){
                 return this.$message.error('请输入项目名称');
            }
            if(this.formLabelAlign.type === ''){
                return this.$message.error('请选择影视类型');
            }
            if(this.formLabelAlign.totalOfMoney === ''){
                return this.$message.error('请输入融资金额');
            }
            if(this.isNumber(Number(this.formLabelAlign.totalOfMoney))){
                if(this.formLabelAlign.totalOfMoney < 100000){
                    return this.$message.error('融资金额需大于100000');
                }
                if(this.formLabelAlign.totalOfMoney % 10000 !== 0){
                    return this.$message.error('融资金额需10000的倍数');
                }else{
                    this.formLabelAlign.totalOfMoney = numberFormat.toInteger(this.formLabelAlign.totalOfMoney);
                }
            }
            
            if(this.formLabelAlign.priceOfUnit === ''){
                return this.$message.error('请输入单份价格');
            }

            if(this.formLabelAlign.userLimit === ''){
                return this.$message.error('请输入限购份数');
            }
            if(this.formLabelAlign.deposit === ''){
                this.formLabelAlign.deposit = 0;
            }else{
                if(numberFormat.toInteger(this.formLabelAlign.deposit) > numberFormat.toInteger(this.formLabelAlign.priceOfUnit)){
                    return this.$message.error('输入订金需小于项目单价');
                }
            }

            

            if(this.formLabelAlign.subtitle === ''){
                return this.$message.error('请输入简介');
            }
            if(this.formLabelAlign.incomeDetail === ''){
                return this.$message.error('请输入收益说明');
            }
            if(this.formLabelAlign.riskWarning === ''){
                return this.$message.error('请输入风险提示');
            }

            if(this.formLabelAlign.queue === ''){
                return this.$message.error('请输入排序值');
            }

            if(this.formLabelAlign.coverImage === ''){
                return this.$message.error('请上传项目封面');
            }
            if(this.formLabelAlign.carousels.length === 0){
                return this.$message.error('请上传项目轮播图');
            }
        },

        //封面图
        handleAvatarSuccess(res,file) {
            if(res.status){
                this.coverImageSatus = true;
                this.formLabelAlign.coverImage = res.data;
            }
        },

        //轮播图
        handleRotationSuccess(res) {
            if(res.status){
                this.carouselStatus = true;
                if(this.formLabelAlign.carousels.length < 5){
                    this.formLabelAlign.carousels.push(res.data);
                }else{
                    this.$message.error('最多上传5张');
                }
                
            }
        },

        delRotation(item,index){
            this.formLabelAlign.carousels.splice(index,1);
            // this.carouselStatus = false;
        },

        sampleContractData(data){
            this.formLabelAlign.contractDetail = data;
            console.log(this.formLabelAlign);
        },

        //提交编辑
        submit(){
            console.log(this.formLabelAlign.totalOfMoney,this.formLabelAlign.priceOfUnit);
            if(this.vails() === undefined){

                //融资金额除以单价金额需大于1
                if(numberFormat.toInteger(this.formLabelAlign.totalOfMoney) / numberFormat.toInteger(this.formLabelAlign.priceOfUnit) < 1){
                    this.$message.error('剩余份数需大于1，请修改融资金额或项目单价')
                }    

                if(this.formLabelAlign.content === ''){
                    return this.$message.error('请输入项目内容');
                }
                if(this.formLabelAlign.contractDetail === ''){
                    return this.$message.error('样本合同不能为空');
                }
                this.formLabelAlign.priceOfUnit = numberFormat.toInteger(this.formLabelAlign.priceOfUnit);
                this.formLabelAlign.deposit = numberFormat.toInteger(this.formLabelAlign.deposit);
                this.formLabelAlign.carousels = JSON.stringify(this.formLabelAlign.carousels);
                ajax('movieEditForManager',this.formLabelAlign).then((res) => {
                    console.log(res);
                    if(res.data.status){
                        this.$message.success('编辑保存成功')
                        this.getData();
                        this.$router.push({path:'/projectOverflew/allProject'});
                    }else{
                        this.$message.error(res.data.message);
                        this.formLabelAlign.carousels = JSON.parse(this.formLabelAlign.carousels);
                        this.formLabelAlign.totalOfMoney = numberFormat.showDecimal(this.formLabelAlign.totalOfMoney);
                        this.formLabelAlign.priceOfUnit = numberFormat.showDecimal(this.formLabelAlign.priceOfUnit);
                        this.formLabelAlign.deposit = numberFormat.showDecimal(this.formLabelAlign.deposit);
                    }
                });
            }
        }

    },
    components:{
        Tinymce,
        threeTinymce
    },
    mounted(){
        
        this.getList();
        this.getData();
    }
}
</script>


<style lang="less" scoped>
.edit{
    padding: 1rem;
    .firstFillIn{
        padding-bottom: 1rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid #e7e7e7;
    }
    .rotationList{
            display: flex;
            flex-wrap: wrap;
            width: inherit;
            .imgList{
                margin: 0 .5rem .5rem 0;
                div{
                    width: 321px;
                    height: 182px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                p{
                    text-align: center;
                    color: red;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
        }
    .formData{
        
        .el-form-item{
            width: 54%;
        }
        .moneyItem{
            display: flex;
            .el-input{
                width: 92%;
            }
            span{
                margin-left: 1rem;
            }
        }
        .imgBox{
            width: 90px;
            height: 133px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

    .submit{
        margin: 2rem 1rem;
    }
    .editExplain{
        margin: 0;
        color: #aaa;
    }
}
</style>
